<template>
  <a-card style="width: 100%">
    <!-- 搜索 -->
    <a-form name="customized_form_controls" layout="inline" :model="values" @finish="onFinish"
      style="margin: 30px 0; background: #fff" expandFixed="true">

      <a-space class="se_box">
        <!-- 文件名称输入框 -->
        <a-form-item name="types" label="IP">
          <a-input v-model:value="values.ip" placeholder="请输入类型" />
        </a-form-item>
        <!-- 文件类型输入框 -->
        <a-form-item name="title" label="UA">
          <a-input v-model:value="values.userAgent" placeholder="请输入搜索词" />
        </a-form-item>
        <!-- 文件类型输入框 -->
        <a-form-item name="count" label="URL">
          <a-input v-model:value="values.url" placeholder="请输入搜索量" />
        </a-form-item>
        <!-- 文件名称输入框 -->
        <a-form-item name="types" label="地址">
          <a-input v-model:value="values.address" placeholder="请输入类型" />
        </a-form-item>
        <!-- 文件类型输入框 -->
        <a-form-item name="title" label="浏览器">
          <a-input v-model:value="values.browser" placeholder="请输入搜索词" />
        </a-form-item>
        <!-- 文件名称输入框 -->
        <a-form-item name="types" label="内核">
          <a-input v-model:value="values.engine" placeholder="请输入类型" />
        </a-form-item>
        <!-- 文件类型输入框 -->
        <a-form-item name="title" label="OS">
          <a-input v-model:value="values.os" placeholder="请输入搜索词" />
        </a-form-item>
        <!-- 文件类型输入框 -->
        <a-form-item name="count" label="设备">
          <a-input v-model:value="values.device" placeholder="请输入搜索量" />
        </a-form-item>
        <a-form-item expandFixed="right">
          <a-button type="primary" html-type="submit">搜索</a-button>
          <a-button @click="() => toset()">重置</a-button>
        </a-form-item>
      </a-space>
    </a-form>
  </a-card>
  <br />
  <a-card style="width: 100%">
    <a-card v-if="state.selectedRowKeys.length != 0">
      <a-space>
        <a-button @click="() => removeall()">删除</a-button>
      </a-space>
    </a-card>
    <a-table :dataSource="visitList" :columns="columns" style="width: 100%; height: 100%"
      :row-selection="{ onChange: onSelectChange }" @change="handleTableChange" :scroll="{ x: 1300 }" :pagination="false">
      <template #bodyCell="{ column, record }">
        <!-- 设置 -->
        <template v-if="column.key === 'addressa'">
          <div class="edits">
            <a-popconfirm title="你确定要删除它吗" ok-text="是" cancel-text="否" @confirm="() => confirm(record)">
              <a-button>删除</a-button>
            </a-popconfirm>
          </div>
        </template>
      </template>
    </a-table>
  </a-card>
  <a-card style="width: 100%">
    <a-pagination v-model:current="current" v-model:page-size="pageSize" :total="total"
      :page-size-options="pageSizeOptions" show-size-changer @showSizeChange="onShowSizeChange"
      @change="handleTableChange" />
  </a-card>
</template>

<script setup lang="ts">
import { reactive, computed, ref } from "vue"
import { storeToRefs } from "pinia";
import { useVisit } from "../../store/visit"
let visits = useVisit();
let { visitList, total } = storeToRefs(visits)
localStorage.removeItem("searchobj")
let flag = false;

//定义搜索框的初始数据
const values = reactive({
  url:"",
  ip:"",
  browser:"",
  engine:"",
  os:"",
  device:"",
  address:"",
  userAgent:""
});
//重置
const toset = () => {
  location.reload()
}

//点击搜索获取表单数据
const onFinish = () => {
  //点击模糊搜索
  console.log(values, "values")
  flag = true
  searchaa()
}

//封装一个模糊搜索的方法
let searchaa = () => {
  let obj = JSON.parse(localStorage.getItem("searchobj") || '{}');

  if (flag) {
    obj = {
      page: 1,
      pageSize: 12
    }
  } else {
    obj = {
      ...obj,
      page: current.value,
      pageSize: pageSize.value
    }
  }
  if (values.url) {
    obj = { ...obj, url: values.url }
  }
  if (values.ip) {
    obj = { ...obj, ip: values.ip }
  }
  if (values.browser) {
    obj = { ...obj, browser: values.browser }
  }
  if (values.engine) {
    obj = { ...obj, engine: values.engine }
  }
  if (values.os) {
    obj = { ...obj, os: values.os }
  }
  if (values.device) {
    obj = { ...obj, device: values.device }
  }
  if (values.address) {
    obj = { ...obj, address: values.address }
  }
  if (values.userAgent) {
    obj = { ...obj, userAgent: values.userAgent }
  }
  localStorage.setItem("searchobj", JSON.stringify(obj))
  visits.getvisitsList(obj)
}

//点击删除单个
const confirm = (val: any) => {
  // console.log(val.id,'ok')
  visits.removevisits(val.id)
};


//删除多个
const removeall = () => {
  visits.removealls([...state.selectedRowKeys])
}

//定义分页数据
let current = ref(1), pageSize = ref(12);
const pageSizeOptions = ref<string[]>(['8', '12', '16', '20', '24']);
//初始化页面数据
visits.getvisitsList({ page: current.value, pageSize: pageSize.value })

//多选

type Key = string | number;
const state = reactive<{
  selectedRowKeys: Key[];
  loading: boolean;
}>({
  selectedRowKeys: [], // Check here to configure the default column
  loading: false,
});

const onSelectChange = (selectedRowKeys: Key[]) => {
  state.selectedRowKeys = selectedRowKeys;
};

// 表格分页change事件
const handleTableChange = (page: number, pageSizes: number) => {
  // console.log(page,pageSize,"val")
  current.value = page
  pageSize.value = pageSizes
  //点击分页 切换分页 请求数据
  flag = false;
  searchaa()
}
const onShowSizeChange = (currents: number, pageSizes: number) => {
  console.log(currents, pageSizes, "页码，条数");
  current.value = 1
  pageSize.value = pageSizes;
};

//表格数据格式
const columns = [
  {
    title: "路径",
    dataIndex: "url",
    key: "url",
    width: 200,

  }, {
    title: "IP",
    dataIndex: "ip",
    key: "ip",            
    width: 100,

  }, {
    title: "浏览器",
    dataIndex: "browser",
    key: "browser",
    width: 100,

  }, {
    title: "内核",
    dataIndex: "engine",
    key: "engine",
    width: 100,

  }, {
    title: "操作系统",
    dataIndex: "os",
    key: "os",
    width: 100,

  }, {
    title: "设备",
    dataIndex: "device",
    key: "device",
    width: 100,

  }, {
    title: "地址",
    dataIndex: "address",
    key: "address",
    width: 100,

  }, {
    title: "搜索量",
    dataIndex: "count",
    key: "count",
    width: 100,

  }, {
    title: "搜索时间",
    dataIndex: "createAt",
    key: "createAt",
    width: 100,

  },
  {
    title: "编辑",
    dataIndex: "addressa",
    key: "addressa",
    width: 100,
    fixed: "right",
  },
];
</script>

<style lang="scss">
.se_box{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
</style>